{include file="../application/index/view/common/header.html" /}

<section class="index" style="background:#f5f5f5;">
  <!-- <div>{$userInfo.uname}</div> -->
  <div class="my-container">
    <!--头部导航-->
    <div>
      <ul style="width:1100px;margin:0 auto">
        <li style="margin-left:235px;"><a href="/#" class="active">推荐</a></li>
        <li><a href="/#">排行榜</a></li>
        <li><a href="/#">歌单</a></li>
        <li><a href="/#">主播电台</a></li>
        <li><a href="/#">歌手</a></li>
        <li><a href="/#">新碟上架</a></li>
      </ul>
    </div>

    <!--轮播-->
    <div data-change='my-bg' class="my-bg1">
      <div class="my-car">
        <div>
          <img src="/index/img/carousel0.jpg" alt="">
          <img src="/index/img/carousel1.jpg" alt="">
          <img src="/index/img/carousel2.jpg" alt="">
          <img src="/index/img/carousel3.jpg" alt="">
          <!--相对于该父元素绝对定位-->
          <ul class="my-intro">
            <li class="active1"></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
      <a href="/#" class="prev"><i class="icon iconfont icon-left"></i></a>
      <a href="/#" class="next"><i class="icon iconfont icon-right"></i></a>
    </div>

    <!--主体部分-->
    <div>
      <div class="my-left">

        <!--标题1-->
        <div class="my-header0" style="height:40px;line-height:40px;margin-top:20px;">
          <div class="float-left">
            <i class="iconfont icon-ziyuanldpi1 pr-2"></i>
            <h5 style="font-family:'Microsoft Yahei, Arial, Helvetica, sans-serif';font-size:20px;"
              class="text-muted float-right">热门推荐</h5>
          </div>
          <ul class="float-left" style="margin-left:10px;">
            <li><a href="/#">华语</a></li>
            <li><a href="/#">流行</a></li>
            <li><a href="/#">摇滚</a></li>
            <li><a href="/#">民谣</a></li>
            <li><a href="/#" style="border:none">电子</a></li>
          </ul>
          <span class="float-right" style="height:40px;"><a href="/#">更多</a><i
              class="icon iconfont icon-ziyuanldpi"></i></span>
        </div>

        <!--内容1-->
        <div class="my-content0">
          <a href="/#">
            <img src="/index/img/people0.jpg" alt="">
            <p>在这些孤单角色里，你是否找到自己？</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people1.jpg" alt="">
            <p>《太空乐鉴赏与简史》</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people2.jpg" alt="">
            <p>爱丽丝没有仙境</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people3.jpg" alt="">
            <p>忽然之间</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people3.jpg" alt="">
            <p>忽然之间</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people1.jpg" alt="">
            <p>《太空乐鉴赏与简史》</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people0.jpg" alt="">
            <p>在这些孤单角色里，你是否找到自己？</p>
            <div></div>
          </a>
          <a href="/#">
            <img src="/index/img/people4.jpg" alt="">
            <p>在这些孤单角色里，你是否找到自己？</p>
            <div></div>
          </a>
        </div>
        <!--标题2-->

        <div class="my-header0" style="height:40px;line-height:40px;;margin-top:50px;">
          <div class="float-left">
            <i class="iconfont icon-ziyuanldpi1 pr-2"></i>
            <h5 style="font-family:'Microsoft Yahei, Arial, Helvetica, sans-serif';font-size:20px;"
              class="text-muted float-right">个性化推荐</h5>
          </div>

          <span class="float-right" style="height:40px;"><a href="/#">更多</a><i
              class="icon iconfont icon-ziyuanldpi"></i></span>
        </div>

        <!--内容2-->
        <div class="my-tuijian">
          <ul>
            <li>
              <div class="my-date">
                <p>星期三</p>
                <p>17</p>
              </div>
              <a href="#">每日推荐</a>
              <p title="根据你的口味生成，每天6:00更新">
                根据你的口味生成，<br>每天6:00更新</p>
            </li>
            <li>
              <img src="/index/img/wangyi1.jpg" alt=""><br>
              <a href="#">好 听 到 可 以 单 曲 循 环 (中)</a>
              <p>
                <em>根据你收藏的歌单《初识不知曲中意，再听已是曲中人》推荐</em>
              </p>
            </li>
            <li>
              <img src="/index/img/wangyi4.jpg" alt="">
              <a href="#">「青春印象」有没有一首歌瞬间勾起你的回忆</a>
              <p>
                <em>根据你收藏的歌单《初识不知曲中意，再听已是曲中人》推荐</em>
              </p>
            </li>
            <li>
              <img src="/index/img/wangyi5.jpg" alt="">
              <a href="#">萧忆情/西瓜jun/西瓜kune/慕寒/排骨教主…</a>
              <p>
                <em>根据你收藏的歌单《初识不知曲中意，再听已是曲中人》推荐</em>
              </p>
            </li>
          </ul>
        </div>
        <!--标题3-->
        <div class="my-header0" style="height:40px;line-height:40px;margin-top:50px;">
          <div class="float-left">
            <i class="iconfont icon-ziyuanldpi1 pr-2"></i>
            <h5 style="font-family:'Microsoft Yahei, Arial, Helvetica, sans-serif';font-size:20px;"
              class="text-muted float-right">新碟上架</h5>
          </div>

          <span class="float-right" style="height:40px;"><a href="/#">更多</a><i
              class="icon iconfont icon-ziyuanldpi"></i></span>
        </div>
        <!--内容3-->
        <div class="my-car1">
          <div class="my-parent">
            <div class="my-inner">
              <ul class="my-item">
                <li><a href="/#"><img src="/index/img/animal0.jpg" alt="">
                    <a href="/#">Venom (Music From The Motion Picture)</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal1.jpg" alt="">
                    <a href="/#">亲爱的怪物</a>
                    <a href="/#">炎亚纶</a></a></li>
                <li><a href="/#"><img src="/index/img/animal2.jpg" alt="">
                    <a href="/#">Head Above Water</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal3.jpg" alt="">
                    <a href="/#">Venom (Music From The Motion Picture)</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal4.jpg" alt="">
                    <a href="/#">Venom (Music From The Motion Picture)</a>
                    <a href="/#">Eminem</a></a></li>
              </ul>
              <ul class="my-item">
                <li><a href="/#"><img src="/index/img/animal4.jpg" alt="">
                    <a href="/#">Venom (Music From The Motion Picture)</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal3.jpg" alt="">
                    <a href="/#">亲爱的怪物</a>
                    <a href="/#">炎亚纶</a></a></li>
                <li><a href="/#"><img src="/index/img/animal2.jpg" alt="">
                    <a href="/#">Head Above Water</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal1.jpg" alt="">
                    <a href="/#">Venom (Music From The Motion Picture)</a>
                    <a href="/#">Eminem</a></a></li>
                <li><a href="/#"><img src="/index/img/animal0.jpg" alt="">
                    <a href="/#">亲爱的怪物</a>
                    <a href="/#">Eminem</a></a></li>
              </ul>
            </div>
          </div>
          <a href="javascript:" class="my-prev disabled" data-left='0'>
            <i class="icon iconfont icon-left"></i></a>
          <a href="javascript:" class="my-next" data-right='1'>
            <i class="icon iconfont icon-right"></i></a>
        </div>
        <!--标题4-->
        <div class="my-header0" style="height:40px;line-height:40px;margin-top:50px;">
          <div class="float-left">
            <i class="iconfont icon-ziyuanldpi1 pr-2"></i>
            <h5 style="font-family:'Microsoft Yahei, Arial, Helvetica, sans-serif';font-size:20px;"
              class="text-muted float-right">榜单</h5>
          </div>

          <span class="float-right" style="height:40px;"><a href="/#">更多</a><i
              class="icon iconfont icon-ziyuanldpi"></i></span>
        </div>
        <!--内容4-->
        <div class="my-sort">
          <ul>
            <li>
              <a href="/#"><img src="/index/img/music0.jpg" alt="" class="my-img1"></a>
              <div>
                <h5><a href="#">云音乐飙升榜</a></h5>
                <i class="icon iconfont icon-bofang"></i>
                <i class="icon iconfont icon-wenjianjia"></i>
              </div>
            </li>
            <li><span class="text-danger">1</span>
              <a href="#">Way Back Home</a></li>
            <li><span class="text-danger">2</span>
              <a href="#">年少有为</a></li>
            <li><span class="text-danger">3</span>
              <a href="#">一万个不可能</a></li>
            <li><span>4</span>
              <a href="#">东西</a></li>
            <li><span>5</span>
              <a href="#">Head About Water</a></li>
            <li><span>6</span>
              <a href="#">戏精</a></li>
            <li><span>7</span>
              <a href="#">但凡</a></li>
            <li><span>8</span>
              <a href="#">Blue River</a></li>
            <li><span>9</span>
              <a href="#">若梦境来袭</a></li>
            <li><span>10</span>
              <a href="#">最后一杯</a></li>
            <li><a href="#">查看全部<i class="iconfont icon-right" style="font-size:13px"></i></a></li>
          </ul>
          <ul>
            <li>
              <a href="/#"><img src="/index/img/music1.jpg" alt="" class="my-img1"></a>
              <div>
                <h5><a href="#">云音乐新歌榜</a></h5>
                <i class="icon iconfont icon-bofang"></i>
                <i class="icon iconfont icon-wenjianjia"></i>
              </div>
            </li>
            <li><span class="text-danger">1</span>
              <a href="#">Way Back Home</a></li>
            <li><span class="text-danger">2</span>
              <a href="#">年少有为</a></li>
            <li><span class="text-danger">3</span>
              <a href="#">一万个不可能</a></li>
            <li><span>4</span>
              <a href="#">东西</a></li>
            <li><span>5</span>
              <a href="#">Head About Water</a></li>
            <li><span>6</span>
              <a href="#">戏精</a></li>
            <li><span>7</span>
              <a href="#">但凡</a></li>
            <li><span>8</span>
              <a href="#">Blue River</a></li>
            <li><span>9</span>
              <a href="#">若梦境来袭</a></li>
            <li><span>10</span>
              <a href="#">最后一杯</a></li>
            <li><a href="#">查看全部<i class="iconfont icon-right" style="font-size:13px"></i></a></li>
          </ul>
          <ul>
            <li>
              <a href="/#"><img src="/index/img/music2.jpg" alt="" class="my-img1"></a>
              <div>
                <h5><a href="#">云音乐原创歌曲榜</a></h5>
                <i class="icon iconfont icon-bofang"></i>
                <i class="icon iconfont icon-wenjianjia"></i>
              </div>
            </li>
            <li><span class="text-danger">1</span>
              <a href="#">Way Back Home</a></li>
            <li><span class="text-danger">2</span>
              <a href="#">年少有为</a></li>
            <li><span class="text-danger">3</span>
              <a href="#">一万个不可能</a></li>
            <li><span>4</span>
              <a href="#">东西</a></li>
            <li><span>5</span>
              <a href="#">Head About Water</a></li>
            <li><span>6</span>
              <a href="#">戏精</a></li>
            <li><span>7</span>
              <a href="#">但凡</a></li>
            <li><span>8</span>
              <a href="#">Blue River</a></li>
            <li><span>9</span>
              <a href="#">若梦境来袭</a></li>
            <li><span>10</span>
              <a href="#">最后一杯</a></li>
            <li><a href="#">查看全部<i class="iconfont icon-right" style="font-size:13px"></i></a></li>
          </ul>
        </div>
      </div>



      <div class="my-right">
        <div>
          <p>登录网易云音乐，可以享受无限收藏的乐趣，
            并且无限同步到手机</p>
          <button class="btn btn-danger btn-sm" style="margin-top:20px;">用户登录</button>
        </div>
        <div style="display: none" class="my-right-hidden">
          <div class="hidden-top">
            <img src="/index/img/avatar.jpg">
            <div class="ting">
              <p>听南怀瑾</p>
              <p>Lv.5</p>
              <button>签到</button>
            </div>
          </div>
          <div class="hidden-buttom">
            <ul>
              <li>
                <em>3</em>
                <p>动态</p>
              </li>
              <li>
                <em>3</em>
                <p>关注</p>
              </li>
              <li>
                <em>2</em>
                <p>粉丝</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="my-aside">
          <h5>
            <span>入驻歌手</span>
            <span><a href="#">查看全部 <i class="iconfont icon-right" style="font-size:13px"></i></a></span>
          </h5>
          <hr>
          <ul class="my-ul1">
            <li>
              <img src="/index/img/mei-1.jpg" alt="">
              <a href="#">
                <p>张惠妹aMEI</p>
                <p>台湾歌手张惠妹</p>
              </a>
            </li>
            <li>
              <img src="/index/img/mei-2.jpg" alt="">
              <a href="#">
                <p>Fine乐团</p>
                <p>独立音乐人</p>
              </a>
            </li>
            <li>
              <img src="/index/img/mei-3.jpg" alt="">
              <a href="#">
                <p>万晓利</p>
                <p>民谣歌手、中国风</p>
              </a>
            <li>
              <img src="/index/img/mei-4.jpg" alt="">
              <a href="#">
                <p>音乐人 赵雷</p>
                <p>民谣歌手</p>
              </a>
            <li>
              <img src="/index/img/mei-5.jpg" alt="">
              <a href="#">
                <p>王三溥</p>
                <p>音乐人</p>
              </a>
            </li>
          </ul>
          <button type="button" class="my-btn">申请成为网易音乐人</button>
          <h5 class="my-h5">
            <span>热门主播</span>
          </h5>
          <hr>
          <ul class="my-ul2">
            <li>
              <img src="/index/img/chen-1.jpg" alt="">
              <div>
                <a href="#">陈立<span>V</span></a>
                <p>心里学家、美食家陈立教授</p>
              </div>
            </li>
            <li>
              <img src="/index/img/chen-2.jpg" alt="">
              <div>
                <a href="#">DJ艳秋<span>V</span></a>
                <p>著名音乐节目主持人</p>
              </div>
            </li>
            <li>
              <img src="/index/img/chen-3.jpg" alt="">
              <div>
                <a href="#">国家大剧院古典音乐频道<span>V</span></a>
                <p>国家大剧院古典音乐官方</p>
              </div>
            </li>
            <li>
              <img src="/index/img/chen-4.jpg" alt="">
              <div>
                <a href="#">谢谢收听<span>V</span></a>
                <p>南京电视台主持人王鑫</p>
              </div>
            </li>
            <li>
              <img src="/index/img/chen-5.jpg" alt="">
              <div>
                <a href="#">DJ晓苏<span>V</span></a>
                <p>独立DJ CRI环球旅游广播</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

{include file="../application/index/view/common/footer.html" /}
<!--底部侧边栏-->
<!--aside class="aside-bottom my-opacity">
    <div class="aside-play">
        <div class="my-control">
            <a href="#">
                <i class="icon iconfont icon-kuaitui"></i>
            </a>
            <a href="#">
                <i class="icon iconfont icon-bofang" data-play="play"></i>
            </a>
            <a href="#">
                <i class="icon iconfont icon-kuaijin1"></i>
            </a>
        </div>
        <div class="center-item">
            <div class="img-item">
                <img src="/index/img/small1.jpg" alt="">
            </div>
            <div>
                <em>恋爱循环 - 左右声道音乐娘制作</em>
                <em>花澤香菜/釘宮理恵</em>
                <div class="my-progress">
                    <div><i></i></div>
                </div>
            </div>
            <span>00:00 / <i>00:00</i></span>
        </div>
        <div class="right-item">
            <i class="icon iconfont icon-wenjianjia"></i>
            <i class="icon iconfont icon-tubiao212"></i>
        </div>
        <div class="my-volume">
            <i class="icon iconfont icon-yinliang"></i>
            <i class="icon iconfont icon-xunhuanbofang01"></i>
            <i class="icon iconfont icon-plist"></i>
        </div>
    </div>
    <div class="btn-hide">
        <span><i class="icon iconfont icon-lock"></i></span>
    </div>
</aside -->